<template>
	<div>
		<div class="head">
			<a @click="getBack" class="return"></a>
			支付账户
		</div>
		<div class="overlay">
			<div class="overlay-content scrolling">
				<div style="padding: 10px 15px;">
					<van-card>
						<div slot="title" style="padding-top: 5px;">
							<img src="../assets/images/zhifubao.png" width="25" height="25" />
							<span style="padding-left: 10px;">支付宝</span>
							<div class="toy">
								<span style="opacity: 0.6;">当前账户</span>
							</div>
						</div>
						<div slot="desc" style="padding-top: 5px;color: rgb(133, 141, 172);">
							<span v-if="list.Alipay" v-text="list.Alipay.trueName">
								余心怡
							</span>
							<span v-if="!list.Alipay">
								未绑定
							</span>
						</div>
						<div slot="price" style="padding-top: 5px;" v-if="list.Alipay">
							<div style="padding-bottom: 10px;color: white;" v-if="list.Alipay" v-text="list.Alipay.card">
								13800138000
							</div>
							<img :src="list.Alipay.qrcode" width="30" height="30" style="padding-bottom: 5px;" @click="getImg" />
						</div>
						<div slot="num">
							<van-button round size="small" class="van-button--info" @click="addZFB" v-if="!list.Alipay">绑定</van-button>
							<van-button round size="small" style="background-color: #9a8d8f;border-color: #9a8d8f;color: white;" v-if="list.Alipay">已绑定</van-button>
						</div>
					</van-card>
					<van-card>
						<div slot="title" style="padding-top: 5px;">
							<img src="../assets/images/zf2.png" width="25" height="25" />
							<span style="padding-left: 10px;">微信</span>
							<div class="toy">
								<span style="opacity: 0.6;">当前账户</span>
							</div>
						</div>
						<div slot="desc" style="padding-top: 5px;color: rgb(133, 141, 172);">
							<span v-if="list.WX" v-text="list.WX.trueName">
								余心怡
							</span>
							<span v-if="!list.WX">
								未绑定
							</span>
						</div>
						<div slot="price" style="padding-top: 5px;" v-if="list.WX">
							<div style="padding-bottom: 10px;color: white;" v-if="list.WX" v-text="list.WX.card">
								13800138000
							</div>
							<img :src="list.WX.qrcode" width="30" height="30" style="padding-bottom: 5px;" @click="getImg2" />
						</div>
						<div slot="num">
							<van-button round size="small" class="van-button--info" @click="addWX" v-if="!list.WX">绑定</van-button>
							<van-button round size="small" style="background-color: #9a8d8f;border-color: #9a8d8f;color: white;" v-if="list.WX">已绑定</van-button>
						</div>
					</van-card>
					<van-card>
						<div slot="title" style="padding-top: 5px;">
							<img src="../assets/images/zf3.png" width="25" height="25" />
							<span style="padding-left: 10px;">银行卡</span>
							<div class="toy">
								<span style="opacity: 0.6;">当前账户</span>
							</div>
						</div>
						<div slot="desc" style="padding-top: 5px;color: rgb(133, 141, 172);">
							<span v-if="list.Bank" v-text="list.Bank.trueName">
								余心怡
							</span>
							<span v-if="!list.Bank">
								未绑定
							</span>
						</div>
						<div slot="price" style="padding-top: 5px;" v-if="list.Bank">
							<div style="padding-bottom: 10px;color: white;" v-if="list.Bank" v-text="list.Bank.card">
								13800138000
							</div>
						</div>
						<div slot="num">
							<van-button round size="small" class="van-button--info" @click="addYHK" v-if="!list.Bank">绑定</van-button>
							<van-button round size="small" style="background-color: #9a8d8f;border-color: #9a8d8f;color: white;" v-if="list.Bank">已绑定</van-button>
						</div>
					</van-card>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	let _this;
	import { otc } from './../utils/api';
	import { ImagePreview } from 'vant';
	export default {
		data() {
			return {
				list: [],
				showText: 0
			}
		},
		beforeCreate() {
			_this = this;
		},
		created() {

		},
		mounted() {
			this.getPay();
		},
		methods: {
			getPay() {
				otc.getPayType().then(res => {
					this.list = res.data;
				})
			},
			getImg() { // 点击放大支付宝二维码图片
				ImagePreview([
					_this.list.Alipay.qrcode
				]);
			},
			getImg2() { // 点击放大微信二维码图片
				ImagePreview([
					_this.list.WX.qrcode
				]);
			},
			addZFB() { // 添加支付宝
				if(this.$route.query.roid) {
					this.$router.push({
						path: '/ZFB',
						query: {
							roid: this.$route.query.roid
						}
					})
				}else{
					this.$router.push({
						path: '/ZFB'
					})
				}
			},
			addWX() { // 添加微信
				if(this.$route.query.roid) {
					this.$router.push({
						path: '/WX',
						query: {
							roid: this.$route.query.roid
						}
					})
				}else{
					this.$router.push({
						path: '/WX'
					})
				}
			},
			addYHK() { // 添加银行卡
				if(this.$route.query.roid) {
					this.$router.push({
						path: '/YHK',
						query: {
							roid: this.$route.query.roid
						}
					})
				}else{
					this.$router.push({
						path: '/YHK'
					})
				}
			},
			getBack() {
				if(this.$route.query.roid) {
					this.$router.push({
						path: this.$route.query.roid
					})
				} else {
					this.$router.push({
						path: '/My'
					})
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	/deep/ .van-button--small {
		height: 24px;
		line-height: 22px;
	}
	
	/deep/ .van-card {
		border-radius: 5px;
		background: linear-gradient(90deg, rgb(65, 70, 90), rgb(50, 56, 76));
		color: white;
	}
	
	.toy {
		float: right;
		padding: 4px 10px 4px 30px;
		margin-top: -10px;
		margin-right: -15px;
		border-radius: 5px;
		background: linear-gradient(70deg, transparent 20px, rgb(40, 45, 64) 0px);
		border-bottom-right-radius: 0;
	}
</style>